C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-camera 

Step 2 - Add Images and Buttons

In this step you can create a button for calling the camera and img where the image will be displayed once taken. This will be added to index.html inside div class = "app" element.

 Step 3 - Add Event Listener

The event listener is added inside onDeviceReady function to ensure that Cordova is loaded before we start using it.

 Step 4 - Adding Functions (taking photo)

You have to create capturePicture function that will be passed as a callback to the event listener. It will be triggered when the button is tapped. Inside this function we are calling a global object provided by the plugin API navigator.camera. If picture capture is successful, the data will be sent to callback function onSuccess , if not, the alert with error message will be shown. We will write this piece of code at the bottom of index.js file.

function capturePicture() {

   navigator.camera.getPicture(onSuccess, onFail, {

      quality: 50,

      destinationType: Camera.DestinationType.DATA_URL

   });

   function onSuccess(imageData) {

      var image = document.getElementById('newImage');

      image.src = "data:image/jpeg;base64," + imageData;

   }

   function onFail(message) {

      alert('Failed because: ' + message);

   }

}

Now, when you run the app and press the capture button, native camera will get fired.

When we take and save picture, it will be displayed on the screen.

The same STEPS can be also used for getting image from local file system i.e. phone’. The only difference is the function created in the last step. You can see that an optional parameter sourceType is added.

Step 1 B     

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-camera

 Step 2 B

<button id = "capturePicture">CAPTURE</button>

Step 3 B

document.getElementById("capturePicture ").addEventListener("click", capturePicture);

 Step 4 B

function capturePicture () {

   navigator.camera.getPicture(onSuccess, onFail, { quality: 50,

      destinationType: Camera.DestinationType.DATA_URL,

      sourceType: Camera.PictureSourceType.PHOTOLIBRARY

   });

   function onSuccess(imageURL) {

      var image = document.getElementById('newImage');

      image.src = imageURL;

   }

   function onFail(message) {

      alert('Failed because: ' + message);

   }

}

When you will press the other button, the file system will be open in place of the camera so we can choose the image from the file system we want to display.

There are lots of optional parameters provided in this plugin for customization. These are listed below in the table: